import React,{useState} from 'react';
import { Layout, Menu, Breadcrumb,Table,model} from 'antd';
import './ShuaKaGuaHao.css'
import * as antd from 'antd';
import { Link } from 'react-router-dom';

const formData = {
    kaHao:'123',
    name:'',
    buMenMa:'',
    zhiChengHaoMa:'',
    sex:'',
    shouFeiLeiXing:'',
    phoneNum:'',
    address:''
};
const tableData = [
    {
    key: 1,
    name: '迪迦',
    sex: '男',
    kaHao:123,
    buMenMa:12323,
    zhiChengHaoMa:12321,
    shouFeiLeiXing:'刷卡',
    address:'男生宿舍5栋c114',
    },
];
const zongLanData = {
    guaHaoRenShu:123,
    zongGuaHaoFei:1230,
    yiJiJiaRenCi:88,
    meiJiJiaRenCi:35
};
const { Modal} = antd;
const ShuaKaGuaHao = () => {
    const columns = [
        { title: '姓名', dataIndex: 'name', key: 'name' },
        { title: '性别', dataIndex: 'sex', key: 'sex' },
        { title: '卡号', dataIndex: 'kaHao', key: 'kaHao' },
        { title: '部门码', dataIndex: 'buMenMa', key: 'buMenMa' },
        { title: '职称号码', dataIndex: 'zhiChengHaoMa', key: 'zhiChengHaoMa' },
        { title: '收费类型', dataIndex: 'shouFeiLeiXing', key: 'shouFeiLeiXing' },
        { title: '地址', dataIndex: 'address', key: 'address' },
        {
        title: '操作',
        dataIndex: '',
        key: 'x',
        render: () =><Link to="/mz/skghck"><button className="chaKanBtn">查看</button></Link>,
        },
    ];
    return (
        <div>
            <Breadcrumb style={{marginBottom: 24}}>
                <Breadcrumb.Item>挂号</Breadcrumb.Item>
                <Breadcrumb.Item>刷卡挂号</Breadcrumb.Item>
            </Breadcrumb>
            <div className="ShuaKaBox">
                <h1>校内病人信息登记</h1>
                <span className="span_kaHao">病人卡号:</span>
                <input type="text" className="input_kaHao" placeholder="请输入卡号"></input>
                <button className="btn_kaHao">提交</button>
            </div>
            <div className="BingRenXinXiBox">
                <h1>病人信息</h1>
                    <span className="BingRenXinXiSpan1">卡号</span>
                    <input value={formData.kaHao} type="text" className="BingRenXinXiInput1" readOnly></input>
                    <span className="BingRenXinXiSpan2">姓名</span>
                    <input value={formData.name} type="text" className="BingRenXinXiInput2" readOnly></input>
                    <span className="BingRenXinXiSpan3">部门码</span>
                    <input value={formData.buMenMa} type="text" className="BingRenXinXiInput3" readOnly></input>
                    <span className="BingRenXinXiSpan4">职称号码</span>
                    <input value={formData.zhiChengHaoMa} type="text" className="BingRenXinXiInput4" readOnly></input>
                    <span className="BingRenXinXiSpan5">性别</span>
                    <input value={formData.sex} type="text" className="BingRenXinXiInput5" readOnly></input>
                    <span className="BingRenXinXiSpan6">收费类型</span>
                    <input value={formData.shouFeiLeiXing} type="text" className="BingRenXinXiInput6" readOnly></input>
                    <span className="BingRenXinXiSpan7">电话号码</span>
                    <input value={formData.phoneNum} type="text" className="BingRenXinXiInput7" readOnly></input>
                    <span className="BingRenXinXiSpan8">地址</span>
                    <input value={formData.address} type="text" className="BingRenXinXiInput8" readOnly></input>
                    <button className="BingRenXinXiBtn">确认挂号</button>
            </div>
            <div className="BingRenXinXiBiaoBox">
                <h1>校内病人信息表</h1>
                <div className="searchBox">
                    <span className="searchSpan1">姓名</span>
                    <input type="text" className="searchInput1"></input>
                    <span className="searchSpan2">卡号</span>
                    <input type="text" className="searchInput2"></input>
                    <button className="searchBtn1">查询</button>
                </div>
                <div className="biaoBox">
                <Table
                columns={columns}
                dataSource={tableData}
                />
                </div>
                <div className="zongLanBox">
                    <span className="zongLanBoxSpan1">已挂号人数</span>
                    <span className="zongLanBoxSpan2">{zongLanData.guaHaoRenShu}</span>
                    <span className="zongLanBoxSpan3">人</span>
                    <span className="zongLanBoxSpan4">总挂号费</span>
                    <span className="zongLanBoxSpan5">{zongLanData.zongGuaHaoFei}</span>
                    <span className="zongLanBoxSpan6">元</span>
                    <span className="zongLanBoxSpan7">已计价人次</span>
                    <span className="zongLanBoxSpan8">{zongLanData.yiJiJiaRenCi}</span>
                    <span className="zongLanBoxSpan9">人</span>
                    <span className="zongLanBoxSpan10">没计价人次</span>
                    <span className="zongLanBoxSpan11">{zongLanData.meiJiJiaRenCi}</span>
                    <span className="zongLanBoxSpan12">人</span>
                </div>
            </div>
        </div>
    );
}

export default ShuaKaGuaHao;
